<template>
  <canvas id="snakeCanvas" class="background-canvas"></canvas>
  <div class="content content-main">
    <div id="card">
      <div class="card-inner fade">
        <header>
          <img
            :src="main.avatar.link"
            :width="main.avatar.width"
            :height="main.avatar.height"
            alt="avatar"
          />
          <h1 data-translate="name">{{ main.name }}</h1>
          <h2 id="signature" data-translate="signature" class="typewriter">{{ displayedSignature }}</h2>
        </header>
        <ul>
          <li v-for="(item, index) in main.ul" :key="index">
            <a 
              :href="item.href" 
              :aria-label="item.text" 
              :target="item.href.startsWith('http') ? '_blank' : undefined"
            >
              <i :class="`icon icon-${item.icon}`"></i>
              <span :data-translate="item.text">{{ item.text }}</span>
            </a>
          </li>
        </ul>
        <canvas class="grid-background" id="gridCanvas"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "BlogPage",
    data() {
      return {
        main: {
          avatar: {
            link: '/avatar.png',
            width: 120,
            height: 120
          },
          name: "刘宇琪",
          signature: "选择有时比努力更重要",
          ul: [
            {
              href: "https://gitee.com/she-left-with-regret",
              text: "Gitee",
              icon: "Gitee"
            },
            {
              href: "/game",
              text: "Game",
              icon: "Game"
            },
            {
              href: "https://sheleftwithregrets.github.io/blog.github.io/",
              text: "Blog",
              icon: "blog"
            },
            {
              href: "/tools",
              text: "Tools",
              icon: "Tools"
            }
          ]
        },
        displayedSignature: '',
        typeIndex: 0,
        typeSpeed: 200,
        isDeleting: false,
        pauseTime: 1500
      };
    },
    mounted() {
      import('@/utils/snake.js');
      this.startTypewriter();
    },
    methods: {
      startTypewriter() {
        const signature = this.main.signature;
        
        if (this.isDeleting) {
          // 删除文字
          this.displayedSignature = signature.substring(0, this.typeIndex - 1);
          this.typeIndex--;
        } else {
          // 打字
          this.displayedSignature = signature.substring(0, this.typeIndex + 1);
          this.typeIndex++;
        }
  
        let typeSpeed = this.typeSpeed;
  
        if (!this.isDeleting && this.typeIndex === signature.length) {
          // 完整显示后暂停
          typeSpeed = this.pauseTime;
          this.isDeleting = true;
        } else if (this.isDeleting && this.typeIndex === 0) {
          // 删除完毕后暂停
          typeSpeed = this.pauseTime;
          this.isDeleting = false;
          // 添加一个空格字符以防止页面崩塌
          this.displayedSignature = '\u00A0'; // &nbsp; 的 Unicode 字符
        }
  
        setTimeout(() => {
          this.startTypewriter();
        }, typeSpeed);
      }
    }
  };
</script>

<style scoped>
.content {
  width: 100%;
  height: 100vh;
  position: relative;
  background: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.content-main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #060606;
}
#card {
  position: relative;
  width: 100vw;
  height: 100vh;
  color: #93979e;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: width ease 0.5s, height ease 0.5s;

  .card-inner {
    padding: 0;
    border: 0;
    width: 35%;

    @media screen and (max-width: 1024px) {
      width: 45%;
    }
    @media screen and (max-width: 768px) {
      width: 50%;
    }
    @media screen and (max-width: 540px) {
      width: 60% !important;
      header {
        h1 { font-size: 1rem !important; }
        h2 { font-size: 0.8rem !important; }
      }
      ul {
        li { font-size: 0.8rem !important; }
      }
    }
    @media screen and (max-width: 480px) {
      width: 90% !important;
    }
    @media screen and (max-width: 360px) {
      width: 100% !important;
    }

    header {
      margin-bottom: 40px;
      img {
        border: 3px solid #fff;
        border-radius: 50%;
        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
        transition: 0.4s ease-in-out;
        z-index: 2;
        position: relative;
      }
      h1 {
        margin: 15px 15px 0px;
        color: #fff;
        font-size: 2rem;
        line-height: 1.2em;
        font-weight: 300;
        z-index: 2;
        position: relative;
      }
      h2 {
        color: #ccc;
        letter-spacing: 3px;
        font-size: 0.8rem;
        font-weight: lighter;
        z-index: 2;
        position: relative;
        margin: 15px;
        min-height: 1.2em;
      }
    }

    ul {
      position: relative;
      margin: 0;
      list-style-type: none;
      display: inline-flex;
      width: 100%;
      justify-content: space-around;
      padding-bottom: 40px;

      li {
        z-index: 2;
        position: relative;
        display: inline-block;
        transition: all 0.2s;
        width: 100%;
        height: 100%;

        a {
          color: #b6b6b6;
          transition: all 0.2s;
          &:hover {
            color: #f6f6f6;
            text-shadow: 0 0 2px #f6f6f6;
          }
        }
      }
    }
  }
}
.grid-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.background-canvas {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}
</style>